import React, { useState, useEffect } from 'react';
import { NavBar, Space, Button } from 'antd-mobile';
import { ShareO, WeappNav } from '@react-vant/icons';
// import { Tabs } from '@nutui/nutui-react';
import { ShareSheet } from 'react-vant';
import {
  Dialog,
  List,
  SwipeAction,
  Toast,
  Image,
  ActionSheet,
} from 'antd-mobile';
import { history } from 'umi';
export default function Index() {
  const [visible, setVisible] = useState(false);
  const back = () => {
    history.goBack();
  };
  const options1 = [
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
    ],
  ];
  const right = (
    <div style={{ fontSize: 24 }} onClick={() => setVisible(true)}>
      <Space style={{ '--gap': '16px' }}>
        <ShareO />
      </Space>
      <ShareSheet
        visible={visible}
        options={options1}
        title="立即分享给好友"
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          setVisible(false);
        }}
      />
    </div>
  );
  // 配合列表使用
  const WithList = () => {
    const leftActions = [
      {
        key: 'pin',
        text: '置顶',
        color: 'primary',
      },
    ];
    const rightActions = [
      {
        key: 'unsubscribe',
        text: '取消关注',
        color: 'light',
      },
      {
        key: 'delete',
        text: '删除',
        color: 'danger',
      },
    ];
    const items = [
      {
        img: 'https://img1.baidu.com/it/u=817835249,1016582954&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
        name: '中式新娘服',
      },
      {
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi1%2F57955270%2FO1CN010xfgO31onhwpcpMow_%21%2157955270.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680332344&t=d3f9fdbf4ac878eba41d077b918c3bee',
        name: '外景婚纱写真',
      },
      {
        img: 'https://img.tukuppt.com/photo-big/00/02/19/6188f1720005b9484.jpg',
        name: '拖地婚纱唯美写真',
      },
    ];
    return (
      <List>
        {items.map((item) => (
          <SwipeAction key={item} rightActions={rightActions}>
            <List.Item>
              <img
                src={item.img}
                alt=""
                style={{ width: '20%', marginRight: '1rem' }}
              />
              {item.name}
            </List.Item>
          </SwipeAction>
        ))}
      </List>
    );
  };

  return (
    <>
      <NavBar
        onBack={back}
        right={right}
        style={{
          backgroundColor: '#f6f5f6',
          position: ' sticky',
          top: '0',
          zIndex: '99999',
        }}
      >
        我的收藏
      </NavBar>
      <span>
        <WithList />
      </span>
    </>
  );
}
